import React from "react";
import { Upload, Button } from "antd";
import { PlusOutlined } from "@ant-design/icons";
export default function Blupload(props) {
  const { handleUploadChange, titleImg } = props;
  const handleUpload = (file) => {
    console.log("upload", file);
    const reader = new FileReader();
    reader.readAsDataURL(file.file);
    let titleImg;
    reader.onload = (e) => {
      titleImg = e.target.result;
      console.log(titleImg, "@@@");
      handleUploadChange(titleImg);
    };
  };
  const handleBeforeUpload = (file, fileList) => {
    // 判断类型，大小。
    // console.log(file, "beforeUplaod");
    return "@222";
  };

  const emptyButton = <PlusOutlined />;

  const handleDelete = () => {
    console.log("delete");
    handleUploadChange("delete");
  };
  return (
    <>
      {titleImg && <img src={titleImg} style={{width:'200px',height:'110px'}}></img>}
      {!titleImg ? (
        <Upload
          customRequest={handleUpload}
          showUploadList={false}
          listType="picture-card"
          beforeUpload={handleBeforeUpload}
        >
          {emptyButton}
        </Upload>
      ) : (
        <div className="btn-group" style={{display:'flex',width:'100%'}}>
          <Button danger onClick={handleDelete}>
            删除图片
          </Button>
          <Upload
            customRequest={handleUpload}
            showUploadList={false}
            beforeUpload={handleBeforeUpload}
          >
            <Button style={{marginLeft:"25px"}}>重新上传</Button>
          </Upload>
        </div>
      )}
    </>
  );
}
